<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
//response.sendRedirect("common/login");
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<link rel="stylesheet" href="${path }/resource/zTree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="${path }/resource/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${path }/resource/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.exedit.js"></script>
	<script type="text/javascript" src="${path }/resource/layui/layui.js" ></script>
	<link rel="stylesheet" href="${path }/resource/layui/css/layui.css" />
	<script type="text/javascript" src="${path }/resource/layer/layer.js"></script>
	
	<style type="text/css">
	/* ul.ztere{
	margin-top: 10px;
    border: 1px solid #617775;
    background: #f0f6e4;
    width: 220px;
    height: 500px;
    overflow-y: scroll;
    overflow-x: auto;
	} */
	</style>
	</head>
	<body>
		<div id="top" style="margin:0px;height:60px;background: #E7E8EB;">
		<span >logo图标</span>
		</div>
		
	<div id="left" style="position: absolute;height:80%;width: 15%;">
		<ul id="treeDemo" class="ztree" style="margin:0px;"></ul>
		<SCRIPT type="text/javascript">
	var zTree;
	var element;//使用element模块
	var idarr=[];
	//创建树型结构
	function createTree() {
		var setting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
			  async: {
		            enable: true,//设置是否异步加载
		            url:"${path}/user/fun/myfun"
		        },
			data: {
				simpleData: {
					enable: true,
					pIdKey: "pId",
	                idKey: "id"
				},
				key: {
                    checked: "CHECKED",
                    name:"name",
                    url:"url"
                }
			},
			callback: {
				onClick: onClick,
				beforeDrag:function(){return false;}
			}
		};
		  zTree = $.fn.zTree.init($("#treeDemo"), setting);   
		  zTree.expandAll(true);
	}
	function onClick(e, treeId, treeNode) {
	var url = treeNode.url.trim();//去首尾空格
	if(url!=null&&url!=undefined&&url!=''){
		var page = parent.window.document.getElementById("rig1");
	if($.inArray(treeNode.id , idarr)==-1){
		element.tabAdd('demo', {
        title: treeNode.name 
        ,content: "<iframe  src='"+url+"'  style='width: 100%;height:100%' frameborder='no' border='0' marginwidth='0' scrolling='yes' marginheight='0' allowtransparency='yes'></iframe>"
        ,id: treeNode.id 
      });
		idarr.push(treeNode.id);
		}
      element.tabChange('demo', treeNode.id );
      //点击了关闭后，把该id从数组移除
      //on 方法 一次绑定多个事件"mouseover mouseout"
      //$(selector).on(event,childSelector,data,function,map)
      $(".layui-tab-close").on({
    		  "click":function(e){
			var li = $(this).parent();
			var id = li.attr("lay-id");
			console.log(id);
			idarr.removeByValue(id);
		}});
	}
	}
		createTree();
		
	 	String.prototype.trim=function(){
		　　    return this.replace(/(^\s*)|(\s*$)/g, "");
		　　 } 
	 	//给数组对象添加方法
	 	Array.prototype.removeByValue = function(val) {
	 		  for(var i=0; i<this.length; i++) {
	 		    if(this[i] == val) {
	 		      this.splice(i, 1);
	 		      break;
	 		    }
	 		  }
	 		}
	 		
	 	layui.use('element', function(){
	 		  element = layui.element(); 
	 		  element.on('tab(demo)', function(data){
	 		    console.log(data);
	 		  });
	 		});
	 	
	 	$("#tab").on("click", function (e) {
	 		console.log(2);
	 		console.log(e);
	        if ($(e.target).is(".layui-tab-close")) {
	           /*  var index = layer.load(0, {
	                shade: [0.5, '#000'] //0.1透明度的白色背景
	            }); */
	            var id = $(e.target).parent().attr("lay-id");
	            console.log($(e.target));
	           /*  layer.confirm("确定解除绑定？", {
	                title: "信息",
	                btn: ['确认', '取消'], //按钮
	                icon: 1
	            } */
	            }
	        });
	</SCRIPT>
		</div>
		
<div class="layui-tab layui-tab-brief" id="tab" lay-filter="demo" lay-allowclose="true" style="left:220px;width: 82%;margin:0px;position: absolute;" >
  <ul class="layui-tab-title">
  <li class="layui-this" lay-id="-1">主页</li>
  </ul>
  <div class="layui-tab-content" style="overflow:auto;width:100%;height:500px;">
    <div class="layui-tab-item layui-show">
    	<h1>主页</h1>
    </div>
  </div>
</div>
<script>
function findDimensions(){
	// 获取窗口宽度
	if (window.innerWidth)
	winWidth = window.innerWidth;
	else if ((document.body) && (document.body.clientWidth))
	winWidth = document.body.clientWidth;
	// 获取窗口高度
	if (window.innerHeight)
	winHeight = window.innerHeight;
	else if ((document.body) && (document.body.clientHeight))
	winHeight = document.body.clientHeight;
	// 通过深入 Document 内部对 body 进行检测，获取窗口大小
	if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
	{
	winHeight = document.documentElement.clientHeight;
	winWidth = document.documentElement.clientWidth;
	}
	console.log(winWidth);
	console.log(winHeight);
	if(winWidth<800){
		 console.log(winWidth);
		  console.log(winHeight);
	}
	}
	findDimensions();
	window.onresize=findDimensions;
</script>
		
	</body>
</html>
